<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>凤达汽车租赁</title>
		<link rel="stylesheet" href="../layui/css/layui.css">
		<script type="text/javascript" src="../layui/js/jquery-1.8.3.min.js"></script>
		<script>
			$(document).ready(function(){  
				 let value = localStorage.getItem("user");
				 if(value == null) {
					 location.href='login.html'
				 }else {
					  $('#mybody').attr('hidden',false);
				 }
				 var user = JSON.parse(value)
				$('#nickname').html("欢迎您，"+user.nickName)
			});
			 
			function change(title) {
				let url = "";
				switch (title) {
					case 'user_list':
						url = "user_list.html";
						break;
					case 'bar':
						url = "bar.html";
						break;
					case 'add_user':
						url = "add_user.html";
						break;
					case 'project_list':
						url = "project_list.html";
						break;
					case 'talents_list':
						url = "talents_list.html";
						break;
					case 'my_balance':
						url = "my_balance.html"
						break;
					case 'car_list':
						url = "car_list.html"
						break;
					case 'my_rental':
						url = "my_rental.html"
						break;
					case 'my_comp':
						url = "my_comp.html"
						break;
					case 'modifypwd':
						url = "modifypwd.html"
						break;
				}
				$('iframe').attr('src', url);
			}
		</script>
	</head>
	<body id="mybody" hidden="hidden">
		<input type="hidden" id="groupId" name="groupId" value=""/>
		<div class="layui-layout layui-layout-admin">
			
			<div class="layui-header">
				<div class="layui-logo layui-hide-xs layui-bg-black">凤达汽车租赁系统</div>
				<!-- 头部区域（可配合layui 已有的水平导航） -->
				<ul class="layui-nav layui-layout-left">
					<!-- 移动端显示 -->
					<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
						<i class="layui-icon layui-icon-spread-left"></i>
					</li>

				</ul>
				<ul class="layui-nav layui-layout-right">
				
				    <li class="layui-nav-item layuimini-setting">
				        <a href="javascript:;" id="nickname"></a>
						<!-- <span id="nickname">	 -->
						<!-- </span> -->
				        <dl class="layui-nav-child">
				        
				            </dd>
				            <dd>
				                <a href="javascript:;" class="login-out" style="text-align: center;" onclick="logout()">退出登录</a>
				            </dd>
				        </dl>
				    </li>
				   
				</ul>
			
			</div>

			<div class="layui-side layui-bg-black">
				<div class="layui-side-scroll">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						
						<li class="layui-nav-item">
							<a href="javascript:;">汽车服务</a>
							<dl class="layui-nav-child">
								<dd><a href="javascript:;" onclick="change('car_list')">租车服务</a></dd>
								<dd><a href="javascript:;" onclick="change('my_rental')">还车服务</a></dd>
								<dd><a href="javascript:;" onclick="change('my_comp')">缴交赔付</a></dd>
							</dl>
						</li>
						
						<li class="layui-nav-item">
							<a href="javascript:;">个人信息</a>
							<dl class="layui-nav-child">
								<dd><a href="javascript:;" onclick="change('modifypwd')">密码修改</a></dd>
								<dd><a href="javascript:;" onclick="change('my_balance')">余额查询</a></dd>
							</dl>
						</li>

					
					</ul>
				</div>
			</div>
x
			<div class="layui-body">
				<!-- 内容主体区域 -->
				<div style="padding: 15px;">



					<iframe src="car_list.html" frameborder="0" id="demoAdmin"
						style="width: 100%; height: 550px; border-radius: 2px;"></iframe>



				</div>
			</div>

			<div class="layui-footer">
				<!-- 底部固定区域 -->
				凤达汽车租赁系统
			</div>
		</div>
		
		 <script src="../layui/layui.js"></script>
		 <script>
		 	//JS 
		 	layui.use(['element', 'layer', 'util'], function() {
		 		var element = layui.element,
		 			layer = layui.layer,
		 			util = layui.util,
		 			$ = layui.$;
		 
		 layui.form.on('select(mySelect)', function (data) {
		     console.log(data);
		 })
		 
		 		//头部事件
		 		util.event('lay-header-event', {
		 			//左侧菜单事件
		 			menuLeft: function(othis) {
		 				layer.msg('展开左侧菜单的操作', {
		 					icon: 0
		 				});
		 			}
		 
		 		});
			 
		 	});
			function logout() {
				// alert('aaaa')
				$.ajax({
					url:'http://localhost:8085/users/logout',
					method:'GET',
					// timeout:300000,
					success:function(result) {
						console.log(result);
							if(result.code === 200) {
								layer.msg(result.msg,{time: 1000},function(){
									localStorage.removeItem("user");
									location.href="login.html";
								});
							}
					}
				})
			}
		 </script>
		
		<style>
			.layui-nav-child {
				text-align: left;
			}
			
			* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100vh;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    /* 设置浮动 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #37474F;
}

.trans {
    position: absolute;
    width: 120px;
    height: 120px;
    /* 设置浮动 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #37474F;
}

span {
    position: absolute;
    color: #fff;
    z-index: 1;
}

.trans::after {
    content: "";
    position: absolute;
    width: 115px;
    height: 115px;
    background: #37474F;
    /* 添加边框 */
    border: 4px solid #3ff9dc;
    /* 初始化位置 */
    transform: rotate(45deg);
    /* 添加动画、动画时间和样式 */
    animation: rotate1 3s ease-in-out infinite alternate;
}

.trans::before {
    content: "";
    position: absolute;
    width: 115px;
    height: 115px;
    /* 添加边框 */
    border: 4px solid #ffab91;
    /* 初始化位置 */
    transform: rotate(-90deg);
    /* 添加动画、动画时间和样式 */
    animation: rotate2 3s ease-in-out infinite alternate;
}

@keyframes rotate1 {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-90deg);
    }
    50% {
        transform: rotate(-180deg);
    }
    75% {
        transform: rotate(-270deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


		</style>
	</body>
</html>
